<template>
  <view class="scroll-tab">
    <view class="scroll-tab-wrap flex">
      <view
        v-for="(item, index) of tabList"
        :key="index"
        :class="['scroll-tab-item', { active: activeIndex === index }]"
        @click="changeItem(item, index)"
      >
        <view class="label">{{ item.label }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  tabList: {
    type: Object,
    default: () => [],
  },
});

const activeIndex = ref(0);
function changeItem(item, index) {
  activeIndex.value = index;
}
</script>

<style scoped lang="scss">
.scroll-tab {
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */

  &-wrap {
    overflow-y: hidden;
    background-color: #fff;
    padding: 24rpx 0;
  }

  &-item {
    width: max-content;
    margin-left: 48rpx;

    &.active {
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: $main-color;
        bottom: -5px;
      }
    }
  }
}

.scroll-tab::-webkit-scrollbar {
  display: none; /* Chrome 和 Safari */
}
</style>
